<template>
    <div class="shopcart">
        <div class="content">
            <div class="content-left">
                <div class="logo-wrapper">
                    <div class="logo" :class="{'highlight':totalCount > 0}">
                    <i class="icon-shopping_cart" :class="{'highlight':totalCount > 0}"></i>
                    </div> 
                    <div class="num" v-show="totalCount >0">{{totalCount}}</div>
                </div>
                <div class="price" :class="{'highlight':totalPrice > 0}">￥ {{totalPrice}}元</div>
                <div class="desc">另需配送费￥{{deliveryprice}}元</div>
            </div>
            <div class="content-right">
                <div class="pay" :class="payClass">
                    {{payDesc}}
                </div>
            </div>
        </div>
    </div>    
</template>
<script>
    export default {
        props:{
            selectFoods:{
                type: Array,
                default(){
                    return []
                }
            },
            deliveryprice:{
                type: Number,
                default: 0
            },
            minprie:{
                type: Number,
                default: 0
            }
        },
        computed:{
            totalPrice() {
                let total= 0;
                this.selectFoods.forEach(food => {
                    total += food.price * food.count;
                });
                return total;
            },
            totalCount(){
                let count =0;
                this.selectFoods.forEach((food)=>{
                    count +=food.count;
                });
                return count;
            },
            payDesc() {
                if(this.totalPrice === 0){
                    return `￥${this.minprie}元起送`;
                }else if(this.totalPrice<this.minprie){
                    let diff=this.minprie -this.totalPrice;
                    return `还差￥${diff}元起送`
                }else{
                    return '去结算';
                }
            },
            payClass() {
                if(this.totalPrice < this.minprie){
                    return 'not-enough'
                }else{
                    return 'enough'
                }
            }
        }
    }
</script>

<style lang="stylus">
    .shopcart
        position: fixed
        left: 0
        bottom: 0
        z-index: 50
        width: 100%
        height: 48px
        .content
            display: flex
            background:#141d27
            font-size:0
            color:rgba(255,255,255,0.4)
            .content-left
                flex:1
                .logo-wrapper
                    display:inline-block
                    position: relative
                    vertical-align:top
                    top:-10px
                    margin: 0 12px
                    padding: 6px
                    width: 56px
                    height: 56px
                    box-sizing :border-box
                    vertical-align: top
                    border-radius: 50%
                    background:#141d27
                    .logo
                        width: 100%
                        height: 100%
                        border-radius: 50%
                        background: #2B343C
                        text-align: center
                        &.highlight
                            background :rgb(0,160,220)
                        .icon-shopping_cart
                            line-height:44px
                            color:#80858a
                            font-size:24px
                            &.highlight
                                color:#fff
                    .num
                        position absolute
                        top:0
                        right: 0
                        width: 24px
                        height: 16px
                        line-height: 19px
                        text-align: center
                        border-radius: 16px
                        font-size: 9px
                        font-weight: 700
                        background: rgb(240,20, 20)
                        box-shadow: 0 4px 80x 0 rgba(0,0,0,0.2)
                .price
                    display:inline-block
                    vertical-align:top
                    line-height: 24px
                    margin-top:12px
                    box-sizing:border-box
                    padding-right: 12px
                    border-right:1px solid rgba(255,255,255,0.1)
                    font-size: 16px
                    font-weight: 700
                    &.highlight
                        color:#fff
                .desc
                    display:inline-block
                    vertical-align: top
                    margin:12px 0 0 12px
                    line-height:24px
                    font-size:10px
            .content-right
                flex: 0 0 105px
                width:105px
                .pay
                    height: 48px
                    line-height:48px
                    text-align: center
                    font-size:12px
                    font-weight: 700
                    background: #2b333b
                    &.not-enough
                        background: #2b333b
                    &.eniugh
                        background: #00b43c
                        color:#fff
</style>
